<template>
    <div class="main">
      <div class="mainTop">
        <div class="mainTopLeft">
          <div class="mainTopLeftT">
            <div class="titleTz"></div>
            <div class="textTz">通知公告</div>
            <div class="listTz">
              <ul>
                <li><span>关于网格化管...</span><span class="dateGg">2019-02-02</span></li>
                <li><span>流动人口数据...</span><span class="dateGg">2018-10-15</span></li>
                <li><span>户籍人口数据...</span><span class="dateGg">2018-08-29</span></li>
                <li><span>网格化管理任...</span><span class="dateGg">2018-08-22</span></li>
                <!--<li><span>通知</span><span class="dateGg">2018-04-14</span></li>-->
                <!--<li><span>通知</span><span class="dateGg">2018-04-14</span></li>-->
              </ul>
            </div>
          </div>
          <div class="mainTopLeftB">
            <div class="titleZtd"></div>
            <div class="textZtd">重特大案件</div>
            <div class="listZtd">
              <ul>
                <li><span>事故</span><span class="dateAj">2018-04-14</span></li>
                <li><span>事故</span><span class="dateAj">2018-04-14</span></li>
                <li><span>事故</span><span class="dateAj">2018-04-14</span></li>
                <li><span>事故</span><span class="dateAj">2018-04-14</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="mainTopCenter" id="map"></div>
        <div class="mainTopRight">
          <div class="mainTopRightT">
            <div class="titleZzzx"></div>
            <div class="textZzzx">综治中心</div>
            <div class="treeZz" style="width: 100%;height: 90%;overflow: auto">
              <vue-tree
                v-model="checkedIds"
                :tree-data="treeData"
                :options="options"
                @handle="someActions"
              />
            </div>
          </div>
          <div class="mainTopRightB">
            <div class="titleSlw"></div>
            <div class="textSlw">综治视联网中心</div>
            <table border="1" style="width: 100%;height: 85%;color:white;font-size: 12px;">
              <tr style="background-color: #07a6ff">
                <th>层级</th>
                <th>中心数量</th>
                <th>视频监控</th>
              </tr>
              <tr>
                <th>区县</th>
                <th class="colorY">16</th>
                <th class="colorL">279</th>
              </tr>
              <tr>
                <th>乡镇/街道</th>
                <th class="colorY">78</th>
                <th class="colorL">679</th>
              </tr>
              <tr>
                <th>社区/村</th>
                <th class="colorY">450</th>
                <th class="colorL">2879</th>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="mainCenter">
        <div class="mainCenterLeft">
          <div class="ceng1"></div>
          <div class="mainCenterLeftL">
            <table border="1" style="width: 100%;height: 85%;color:white;font-size: 12px;margin-top: 20px">
              <tr style="background-color: #07a6ff">
                <th>网格组织</th>
                <th>队伍</th>
              </tr>
              <tr>
                <th>区县级：16个</th>
                <th>198名</th>
              </tr>
              <tr>
                <th>乡镇/街道级：265个</th>
                <th>3215名</th>
              </tr>
              <tr>
                <th>社区/村级：3672个</th>
                <th>9867名</th>
              </tr>
              <tr>
                <th>网格：58472个</th>
                <th>677982名</th>
              </tr>
            </table>
          </div>
          <div class="mainCenterLeftC">
            <div class="text1">学历构成</div>
            <div id="educationC"></div>
          </div>
          <div class="mainCenterLeftR">
            <div id="wgxb"></div>
          </div>
        </div>
        <div class="mainCenterRight">
          <div class="titleLdz"></div>
          <div class="textLdz">楼栋长</div>
          <div class="ceng3"></div>
          <div id="ldz"></div>
        </div>
      </div>
      <div class="mainBottom">
        <div class="ceng2"></div>
        <div class="mainBottomLeft">
          <table border="1" style="width: 100%;height: 85%;color:white;font-size: 12px;margin-top: 20px">
            <tr style="background-color: #07a6ff">
              <th>群防群治组织</th>
              <th>队伍</th>
            </tr>
            <tr>
              <th>县级：16个</th>
              <th>196名</th>
            </tr>
            <tr>
              <th>乡镇/街道级：265个</th>
              <th>2948名</th>
            </tr>
            <tr>
              <th>社区/村级：3672个</th>
              <th>8957名</th>
            </tr>
          </table>
        </div>
        <div class="mainBottomCenter">
          <div class="text1">学历构成</div>
          <div id="educationB"></div>
        </div>
        <div class="mainBottomRight">
          <div id="qfxb"></div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      AMapUI: null,
      AMap: null,
      map: null,
      // 复选ids,可传入id数组作为初始选中状态,如[3,4,8]
      checkedIds: [],
      // tree数据
      treeData: [{
        'id': '0',
        'label': '平桥区综治中心',
        'children': [
          {
            'id': '1',
            'label': '城阳城址保护区综治中心',
            'children': [
              {
                'id': '3',
                'label': '马营村综治中心'
              },
              {
                'id': '3',
                'label': '王厂村综治中心'
              }
            ]
          },
          {
            'id': '2',
            'label': '胡店乡综治中心',
            'children': [
              {
                'id': '3',
                'label': '新店村综治中心'
              }
            ]
          },
          {
            'id': '3',
            'label': '五里镇综治中心',
            'children': [
              {
                'id': '3',
                'label': '大堰村综治中心'
              }
            ]
          },
          {
            'id': '4',
            'label': '彭家湾乡综治中心',
            'children': [
              {
                'id': '3',
                'label': '陈寨村综治中心'
              }
            ]
          },
          {
            'id': '5',
            'label': '王岗乡综治中心',
            'children': [
              {
                'id': '3',
                'label': '崔山村综治中心'
              }
            ]
          },
          {
            'id': '5',
            'label': '肖店乡综治中心',
            'children': [
              {
                'id': '3',
                'label': '曹店村综治中心'
              }
            ]
          },
          {
            'id': '5',
            'label': '肖王镇综治中心',
            'children': [
              {
                'id': '3',
                'label': '陈堂村综治中心'
              }
            ]
          },
          {
            'id': '5',
            'label': '长台关乡综治中心',
            'children': [
              {
                'id': '3',
                'label': '冯楼村综治中心'
              }
            ]
          },
          {
            'id': '5',
            'label': '震雷山办事处综治中心',
            'children': [
              {
                'id': '3',
                'label': '双桥居委会综治中心'
              }
            ]
          }
        ]
      }],
      // 设置项   http://www.jq22.com/jquery-info20079 --vue简易树
      options: {
        // 初始化展开层级 根节点为 0
        depthOpen: 1,
        folderBold: false,
        checkbox: false
      }
    }
  },
  mounted () {
    this.init()
    this.educationC()
    this.wgxb()
    this.ldz()
    this.educationB()
    this.qfxb()
  },
  methods: {
    someActions (item) {
      console.log(item)
    },
    init () {
      this.AMapUI = window.AMapUI
      this.AMap = window.AMap
      this.loadDistrictExplorer()
    },
    loadDistrictExplorer () {
      let m = this
      var opts = {
        subdistrict: 1,
        extensions: 'all',
        level: 'district'
      }
      var district = new AMap.DistrictSearch(opts)
      district.search('平桥区', function (status, result) {
        var bounds = result.districtList[0].boundaries
        var mask = []
        let polygons = []
        for (let i = 0; i < bounds.length; i += 1) {
          var polygon = new AMap.Polygon({
            strokeWeight: 1,
            path: bounds[i],
            fillOpacity: 0.4,
            fillColor: '#1426a1',
            strokeColor: '#0091ea'
          })
          polygons.push(polygon)
          mask.push([bounds[i]])
        }
        m.map = new AMap.Map('map', {
          mask: mask,
          center: [114.091104, 32.148489],
          viewMode: '3D',
          labelzIndex: 9999,
          pitch: 40,
          zoom: 10
        })
        m.map.setMapStyle('amap://styles/8d5705fe9baf14eec73c1a9d60bfbaad')
        m.map.add(polygons)
        let maskerIn = new AMap.Marker({
          position: [114.091104, 32.148489]
        })
        m.map.add(maskerIn)
        // 添加高度面
        var object3Dlayer = new AMap.Object3DLayer({zIndex: 1})
        m.map.add(object3Dlayer)
        var height = -8000
        var color = '#ccc'
        var wall = new AMap.Object3D.Wall({
          path: bounds,
          height: height,
          color: color
        })
        wall.transparent = true
        object3Dlayer.add(wall)
      })
    },
    educationC () {
      let educationcEcharts = this.$echarts.init(document.getElementById('educationC'))
      educationcEcharts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          x: 'center',
          y: '85%',
          data: ['小学', '初中', '高中', '大学以上'],
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }

          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
            },
            data: [
              {value: 335, name: '小学'},
              {value: 310, name: '初中'},
              {value: 234, name: '高中'},
              {value: 135, name: '大学以上'}
            ],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    '#00f6ff', '#febe03', '#387cfa', '#e4007f', '#0075a9'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      })
    },
    wgxb () {
      let wgxbEcharts = this.$echarts.init(document.getElementById('wgxb'))
      wgxbEcharts.setOption({
        color: ['#3398DB'],
        legend: {
          y: 10,
          data: ['男', '女'],
          textStyle: {
            color: 'white'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['18-30', '31-40', '40-50', '50-60', '60以上'],
            // axisTick: {
            //   alignWithLabel: true
            // },
            axisLabel: {
              // show: true,
              interval: 0,
              // rotate: 30,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '男',
            type: 'bar',
            stack: '性别',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390],
            color: '#397ffb'
          },
          {
            name: '女',
            type: 'bar',
            stack: '性别',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390],
            color: '#58a1fd'
          }
        ]
      })
    },
    ldz () {
      let ldzEcharts = this.$echarts.init(document.getElementById('ldz'))
      ldzEcharts.setOption({
        backgroundColor: '',
        tooltip: {},
        grid: {
          top: '5%'
        },
        legend: {
          data: [''],
          right: '10%',
          // y: 10,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        xAxis: {
          data: ['18-30', '31-40', '40-50', '50-60', '60以上'],
          axisTick: {
            show: true
          },
          axisLabel: {
            interval: 0,
            // rotate: 45,
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',
              width: '1'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [{
          name: '数量',
          type: 'bar',
          barWidth: 20,
          data: [30, 49, 26, 33, 45],
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#7006d9'},
                  // {offset: 0.5, color: '#44C0C1'},
                  {offset: 1, color: '#039ee6'}
                ]
              )
            }
            // emphasis: {
            //   color: new this.$echarts.graphic.LinearGradient(
            //     0, 0, 0, 1,
            //     [
            //       {offset: 0, color: '#7006d9'},
            //       // {offset: 0.7, color: '#44C0C1'},
            //       {offset: 1, color: '#039ee6'}
            //     ]
            //   )
            // }
          }
        }]
      })
    },
    educationB () {
      let educationbEcharts = this.$echarts.init(document.getElementById('educationB'))
      educationbEcharts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          x: 'center',
          y: '85%',
          data: ['小学', '初中', '高中', '大学以上'],
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }

          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
            },
            data: [
              {value: 335, name: '小学'},
              {value: 310, name: '初中'},
              {value: 234, name: '高中'},
              {value: 135, name: '大学以上'}
            ],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    '#00f6ff', '#febe03', '#387cfa', '#e4007f', '#0075a9'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      })
    },
    qfxb () {
      let qfxbEcharts = this.$echarts.init(document.getElementById('qfxb'))
      qfxbEcharts.setOption({
        color: ['#3398DB'],
        legend: {
          y: 10,
          data: ['男', '女'],
          textStyle: {
            color: 'white'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['18-30', '31-40', '40-50', '50-60', '60以上'],
            // axisTick: {
            //   alignWithLabel: true
            // },
            axisLabel: {
              // show: true,
              interval: 0,
              // rotate: 30,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '男',
            type: 'bar',
            stack: '性别',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390],
            color: '#397ffb'
          },
          {
            name: '女',
            type: 'bar',
            stack: '性别',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390],
            color: '#fec103'
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
  .treeZz::-webkit-scrollbar {
    width: 5px;
    height: 10px;
  }
  .treeZz::-webkit-scrollbar-thumb {
    background-color: rgba(144,147,153,.3);
    border-radius: 3px;
  }
  .main{
    padding: 10px 16px;
  }
.mainTop{
  width: 100%;
  height:550px;
  display: flex;
  justify-content: center;
  position: relative;
}
  .mainCenter{
    width: 100%;
    height: 300px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
  .mainBottom{
    width: 74%;
    height: 300px;
    margin-top: 10px;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .mainTopLeft{
    width: 25%;
    height: 100%;
    position: absolute;
    left: 0px;
    z-index: 1;
  }
  .mainTopRight{
    width: 25%;
    height: 100%;
    position: absolute;
    right: 0;
    z-index: 1;
  }
  .mainTopCenter{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .mainTopLeftT{
    width: 100%;
    height: 60%;
    position: relative;
  }
  .mainTopLeftB{
    width: 100%;
    height: 40%;
    position: relative;
  }
  .titleTz{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_zz1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  .textTz{
    color: white;
    position: absolute;
    top: -10px;
    left: 12%;
  }
  .listTz ul li{
    height: 40px;
    line-height: 44px;
    padding-left: 26px;
    padding-right: 29px;
    color: white;
    background-image: url('~@/assets/bigdata/img/listbg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  .titleZtd{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_zz1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  .textZtd{
    color: white;
    position: absolute;
    top: -10px;
    left: 9%;
  }
  .listZtd ul li{
    height: 40px;
    line-height: 44px;
    padding-left: 26px;
    padding-right: 29px;
    color: white;
    background-image: url('~@/assets/bigdata/img/listbg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }
  .mainTopRightT{
    width: 100%;
    height: 60%;
    position: relative;
    color: white;
  }
  .mainTopRightB{
    width: 100%;
    height: 40%;
    position: relative;
  }
  .titleZzzx{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_zz2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  .textZzzx{
    color: white;
    position: absolute;
    top: -10px;
    left: 10%;
  }
  .titleSlw{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_zz2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  .textSlw{
    color: white;
    position: absolute;
    top: -10px;
    left: 3%;
  }
  .mainCenterLeft{
    width: 74%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    margin-right: 12px;
  }
  .mainCenterRight{
    width: 25%;
    height: 100%;
    position: relative;
  }
  .ceng1{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background:rgb(01, 33, 66);*/
    background:#101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .mainCenterLeftL,.mainCenterLeftC,.mainCenterLeftR{
    width: 33.3%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
  }
  #educationC{
    width: 100%;
    height: 100%;
  }
  .text1{
    color: white;
    position: absolute;
    top: 10px;
  }
  #wgxb{
    width: 100%;
    height: 100%;
  }
  .titleLdz{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_zz2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  .textLdz{
    color: white;
    position: absolute;
    top: -1px;
    left: 13%;
  }
  #ldz{
    width: 100%;
    height: 100%;
  }
  .ceng2{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background:rgb(01, 33, 66);*/
    background:#101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .mainBottomLeft,.mainBottomCenter,.mainBottomRight{
    width: 33.3%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
  }
  #educationB,#qfxb{
    width: 100%;
    height: 100%;
  }
  .colorY{
    color: #d4641d;
  }
  .colorL{
    color: #00ffc6;
  }
  .dateGg,.dateAj{
    color: #00ffc6
  }
  .ceng3{
    width: 100%;
    height: 90%;
    position: absolute;
    /*background:rgb(01, 33, 66);*/
    background:#101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
</style>
